//1.初始化（会建立一个包文件）：cnpm init -y
//2.下载插件（会建立node_models文件夹装载）：cnpm i gulp gulp-imagemin@7 gulp-babel@7.0.1 babel-core babel-preset-es2015 gulp-sass@4 gulp-clean-css gulp-htmlmin gulp-uglify gulp-autoprefixer gulp-rename gulp-load-plugins gulp-webserver  gulp-clean http-proxy-middleware -S
//3.创建gulpfile.js文件：导入并执行gulp任务

//导入gulp，并解构
const {src,dest,watch,series,parallel} = require('gulp')
//导入统一工具
const _ = require('gulp-load-plugins')()

//定义任务
//1.html任务
function handlerHTML(cb){
    src('./project/src/*.html',{//获取
        allowEmpty: true
    })
    .pipe(_.htmlmin({//压缩
        collapseWhitespace: true
    }))
    .pipe(dest('./project/dist'))//放置
    cb()
}
//2.css任务
function handlerCSS(cb){
    src('./project/src/css/*.css',{
        allowEmpty: true
    })
    // .pipe(_.sass())//改成css
    .pipe(_.autoprefixer())//兼容
    .pipe(_.cleanCss())//压缩
    .pipe(dest('./project/dist/css'))
    cb()
}
//3.js任务
function handlerJS(cb){
    src('./project/src/js/*.js',{
        allowEmpty: true
    })
    .pipe(_.babel({
        presets: ['es2015']//es6转es5
    }))
    .pipe(_.uglify())//压缩
    .pipe(dest('./project/dist/js'))
    cb()
}
//4.img任务
function handlerIMG(cb){
    src(['./project/src/images/*.png','./project/src/images/*.jpg'],{
        allowEmpty: true
    })
    .pipe(_.imagemin())//压缩
    .pipe(dest('./project/dist/images'))
    cb()
}
//5.font任务
function handlerFONT(cb){
    src('./project/src/font/*.*',{
        allowEmpty: true
    })
    .pipe(dest('./project/dist/font'))
    cb()
}
//6.json任务
function handlerJSON(cb){
    src('./project/src/json/*.json',{
        allowEmpty: true
    })
    .pipe(dest('./project/dist/json'))
    cb()
}
//7.网站图标
function handlerICO(cb){
    src('./project/src/favicon.ico',{
        allowEmpty: true
    })
    .pipe(dest('./project/dist'))
    cb()
}
//8.清空文件夹
function clearDIR(cb){
    src('./project/dist',{
        allowEmpty: true
    })
    .pipe(_.clean())//删除
    cb()
}
//9.server任务 - 监视执行

//监听任务
function listen(cb){
    watch('./project/src/*.html',{
        ignoreInitial: false
    },handlerHTML);
    watch('./project/src/css/*.css',{
        ignoreInitial: false
    },handlerCSS);
    watch('./project/src/js/*.js',{
        ignoreInitial: false
    },handlerJS);
    watch(['./project/src/images/*.png','./project/src/images/*.jpg'],{
        ignoreInitial: false
    },handlerIMG);
    watch('./project/src/json/*.json',{
        ignoreInitial: false
    },handlerJSON);
    watch('./project/src/font/*.*',{
        ignoreInitial: false
    },handlerFONT);
    watch('./project/src/favicon*.ico',{
        ignoreInitial: false
    },handlerICO);
    //server任务
    setTimeout(() => {
        src('./project/dist')
        .pipe(_.webserver({
            livereload: true,
            open: true
        }))
    }, 5000);
    cb()
}
//导出任务
exports.default = series(clearDIR,listen)